<!DOCTYPE html>
<html lang="ch">
<head>
    <title>简写</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：
        watch监视属性
        1.当被监视的属性变化时，回调函数自动调用，进行相关操作
        2.既可以监视data,也可以监视计算属性
        3.配置项属性immediate:true,则初始化时调用一次handler(n,o)方法
        4.监视的两种写法
            a.Vue创建时传入watch：{}配置
            b.通过vm.$watch()监视
    -->
    <div id="demo">
        <h3>今天天气很{{res}}{{x}}</h3>
        <button @click="info">切换天气</button> 
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示
        const vm = new Vue({
            el:"#demo",
            data:{
                name:"test",
                isHot:true,
                x:1
            },
            computed:{
                res(){
                    return this.isHot ? "热":"凉"
                }
            },
            methods:{
                info(){
                    this.x++
                    this.isHot = !this.isHot
                },
            },
            //方式一
            watch:{
                // isHot:{
                //     immediate:true,
                //     handler(newV,oldV){
                //         console.log('被修改咯',newV,oldV)
                //     }
                // },
                // res:{
                //     immediate:true,
                //     handler(newV,oldV){
                //         console.log('res',newV,oldV)
                //     }
                // }
                isHot(newV,oldV){
                    console.log('ishot',newV,oldV)
                },
                ref(newV,oldV){
                    console.log('res',newV,oldV)
                }
            }, 
        })
        //方式二
        vm.$watch('x',{
            immediate:true,
            handler(newV,oldV){
                console.log('x被修改咯',newV,oldV)
            }
        })
    </script>
</body>
</html>